<template>
  <view class="tags-wrapper">
    <view class="ol">
      <view class="li" v-for="tag in moldTags" :key="tag.id"
          @click="toggleTag(tag.id)"
          :class="{selected: selectedTagId === tag.id}"
      >
        <Icon :iconName="tag.iconName"/>
        <text>{{tag.name}}</text>
      </view>
      <view class="li">
        <Icon iconName="set"/>
        <text>设置</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    tags: Array,
    tagId: Number,
    type: String
  },
  computed: {
    moldTags() {
      if (this.tags !== undefined) {
        return this.tags.filter(tag => tag.mold === this.type)
      }
      return null
    }
  },
  data() {
    return { selectedTagId: -1 }
  },
  created() {
    if (this.tagId || this.tagId === 0) {
      this.selectedTagId = this.tagId
    }
  },
  methods: {
    toggleTag(tagId) {
      console.error(tagId)
      this.selectedTagId = tagId
      this.$emit('update:tagId', this.selectedTagId)
    }
  }
}
</script>

<style lang="scss" scoped>
  .tags-wrapper {
    padding: 0 32px;

    .ol {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      margin-right: -24px;

      .li {
        width: 20%;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 2px 3px 4px #ddd;
        padding: 10px 12px;
        margin-top: 12px;
        margin-right: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        font-size: 12px;

        text {
          padding-top: 5px
        }

        .icon {
          width: 28px;
          height: 28px;
          fill: rgba(0, 0, 0, .6)
        }
      }

      .selected {
        background-color: $uni-color-primary;
        box-shadow: 1px 2px 2px #ddd;
      }
    }
  }
</style>
